<template>
  <div>这是父组件</div>
  <div style="margin: 10px">
    <p>性别-直接使用：{{ store.name }}</p>
    <p>性别-直接使用：{{ store.sex }}</p>
    <p>性别-直接使用：{{ store.age }}</p>
    <p>store计算属性：{{ store.getNameAndAge }}</p>
    <p>store计算属性传值：{{ store.getAddParams(100) }}</p>
    <el-button @click="storeBtn" type="primary">改变store的数据</el-button>
    <el-button @click="reset">
      <el-icon> <aim /> </el-icon>重置store</el-button
    >
    <hr />
    <hr />
    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-gray-500">You have a new message!</p>
      </div>
    </div>
    <div>
      <el-button @click="btnDenl">登录</el-button>
    </div>
    <!-- <el-button @click="store.saveName('哈哈')">store中的actions</el-button> -->
  </div>
  <hr />

  <pinZi></pinZi>
</template>

<script>
  import pinZi from './zi.vue'
  import { useUsersStroe } from '@/store/user.js'
  import { login } from '@/api/login.js'

  export default {
    components: {
      pinZi
    },
    setup() {
      const store = useUsersStroe()
      const storeBtn = function () {
        // store.name = "韦德";
        // store.sex = 20;
        // store.$patch((state) => {
        //   state.name = "韦德";
        //   state.sex = 20;
        // });

        store.saveName('hello') // 调用的store中的 action 方法
      }
      const reset = function () {
        // 将store的值 初始化为仓库的值
        store.$reset()
      }

      const btnDenl = async () => {
        const params = {
          username: '123',
          password: '123',
          vc_token: '',
          auth_type: 'vc',
          flag: '1',
          vc_code: ''
        }
        const data = await login(params)
        console.log(data)
      }

      return {
        store,
        storeBtn,
        reset,
        btnDenl
      }
    }
  }
</script>

<style></style>
